{% extends "automan/template.html" %}
{% load staticfiles %}
{% block title %}服务器列表{% endblock %}

{% block content %}
<div>
    <span class="l">
        请仔细确认发布信息：
        <span class="label label-primary radius" id="id_app_name" app_name="{{ app_name }}">{{ app_name }}</span>
        <span class="label label-primary radius" id="id_env" env="{{ env }}">{{ env }}</span>
        <span class="label label-primary radius" id="id_op_log_no" op_log_no="{{ op_log_no }}" autolog_url="{{ autolog_url }}">
            <a href="{{ autolog_url }}/wslog/log_show/?app_name={{ app_name }}&deploy_version=Demo&operation_no={{ op_log_no }}&env_name={{ env }}" target="_blank">操作日志：{{ op_log_no }}</a>
        </span>
    </span>
</div>
<br/><br/>
<form id="serverForm" name="serverForm" action="" method="post">
    <table class="table table-border table-bordered table-bg table-demo">
        <thead>
        <th>
            <input type="checkbox" name="SelectAllServer"/>
            salt_name
        </th>
        <th>ip地址</th>
        <th>端口</th>
        <th>APP</th>
        <th>环境</th>
        <th>用户</th>
        <th>修改时间</th>
        </thead>

        <tbody>
        {% for item in object_list %}
        <tr class="text-l">
            <td>
                <input type="checkbox" name="serverSelect" value="{{ item.id }}"/>
                {{ item.salt_name }}
            </td>
            <td>{{ item.ip_address }}</td>
            <td>{{ item.port }}</td>
            <td>{{ item.app_name }}</td>
            <td>{{ item.env_name }}</td>
            <td>{{ item.op_user }}</td>
            <td>{{ item.change_date }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <br/>
    {% if is_right %}
    <div class="text-l">
        <input hidden type="text" name="operation_type" value="operate"/>
        <input hidden type="text" name="deploy_version" value="Demo"/>
        <input hidden type="text" name="env" value="{{ env }}"/>
        <input hidden type="text" name="app_name" value="{{ app_name }}"/>
        <span class="select-box inline l">
            <select class="select" name="sp_type" id="sp_select" onchange="getParallelOptions(this.value)">
                <option selected value="serial_deploy">串行</option>
                <option value="parallel_deploy">并行</option>
            </select>
        </span>
        <span class="select-box inline l">
            <select class="select" name="deploy_type" id="deploy_type">
                <option value="">请选择</option>
                <option value="restart">重启</option>
                <option value="start">启动</option>
                <option value="stop">停止</option>
            </select>
        </span>
        <span>
            <button class="btn btn-danger radius" id="btn-operate">立即操作</button>
        </span>
    </div>

    {% else %}
    <div class="Huialert Huialert-error">
        <i class="Hui-iconfont">&#xe6a6;</i>
        你没有{{ app_name }}的{{ env }}环境的操作权限，请联系管理员：{{ admin_user }}
    </div>
    {% endif %}
</form>

{#分页    #}
{% include "automan/paginate.html" %}

<style>
#deploylogout{
    padding:10px;
    {#background-color:#FF2200;#}
    background-color:#0f9ae0;
    color:#FFFFFF;
    width:820px;
    height:460px;
    border-radius:5px;
    display:none;
    position:absolute;
    top:25%;
    left:50%;
    margin-left:-300px;
    margin-top: -150px;
}
</style>
<div id="deploylogout">
    日志输出：
    <span class="uk-float-right">
        <button id="close_deploylogout" class="btn btn-info" onclick="document.getElementById('deploylogout').style.display='none'">关闭</button>
    </span>
    <iframe id="iframe_log" src="" width="800px" height="400px"></iframe>
</div>

{% endblock %}


{% block script %}
<script>
$(".table-demo").HuicheckAll(
    {
        checkboxAll: 'thead input[type="checkbox"]',  // 表头全选的checkbox
        checkbox: 'tbody input[type="checkbox"]' // 列表开头的checkbox
    },
    function(checkedInfo) {
        //console.log(checkedInfo); // checkedInfo 就是选择后返回的参数，请根据自己的业务接口进行二次加工。
    }
);

function getParallelOptions(sp_select_id) {
    if (sp_select_id === "parallel_deploy" && $("#p_select_id").length <=0) {
        html_str = '<select name="p_value" id="p_select_id" class="select">' +
            '<option value="1" selected>1</option>' +
            '<option value="2">2</option>' +
            '<option value="3">3</option>' +
            '<option value="4">4</option>' +
            '<option value="5">5</option>' +
            '</select>';
        $("#sp_select").after(html_str);
    }
    if (sp_select_id === "serial_deploy" && $("#p_select_id").length > 0) {
        $("#p_select_id").remove();
    }
}

$("#close_deploylogout").click(function () {
    $("#deploylogout").hide();
    window.location.reload();
});

// 日志输出模态框
function log_layer(url) {
    layer.open({
        title: ['日志输出', 'font-size:16px;'],
        content: '<iframe id="modal_iframe_log" src=' + url + ' width="800px" height="400px"></iframe>',
        scrollbar: false,
        area: ['850px', '535px'],
        btn: '关闭',
        yes: function(){
            location.reload();
        },
        cancel: function(){
            location.reload();
        }
    });
}

$("#btn-operate").click(function (evt) {
    evt.preventDefault(); //阻止表单提交，只获取表单数据
    var group_data = $("#serverForm").serialize();
    var _self = this;
    console.log(group_data);

    if (group_data.indexOf("serverSelect") === -1 || $("#deploy_type").val() === "") {
        $("body").Huimodalalert({content: "<span class='c-error'>请确认所有选项正确</span>", speed: 3000 });
        return false;
    }

    $.ajax({
        url: '{% url "deploy:deploy-cmd" %}',
        type: 'post',
        data: {
            group_cmd: group_data,
        },
        dataType: 'json',
        beforeSend: function () {
            $("#btn-deploy").hide();
            env_name = $("#id_env").attr("env");
            app_name = $("#id_app_name").attr("app_name");
            autolog_url = $("#id_op_log_no").attr("autolog_url");
            op_log_no = parseInt($("#id_op_log_no").attr("op_log_no")) + 1;
            url = autolog_url + "/wslog/log_show/?app_name=" + app_name + "&deploy_version=Demo&operation_no=" + op_log_no + "&env_name=" + env_name ;
            console.log(url);
            {#$("#iframe_log").attr("src", url);#}
            {#$("#deploylogout").show();#}
            log_layer(url);
            console.log(group_data);
        },
        success: function (json) {
            console.log(json);
        },
        error: function () {

        },
        complete: function () {

        }
    });

});
</script>
{% endblock %}